<template>
  <div class="main">
    <div class="header">
      <span
        class="browse"
        @click="handleShow"
      >
        查看成员（{{_memberNumber}}）
        <i :class="show?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
      </span>
      <div class="ctrl">
        <el-popover
          placement="bottom-end"
          width="100"
          trigger="click"
        >
          <div class="ctrl-group">
            <div
              class="ctrl-item"
              @click="handleAddGroupMemberClick"
            >邀请好友</div>
            <div
              class="ctrl-item"
              v-if="_isGroupCreator"
              @click="handleUpdateGroupInfoClick"
            >编辑群组</div>
            <div
              class="ctrl-item"
              v-if="_isGroupCreator"
              @click="openGroupDeleteConfirm"
            >解散群组</div>
            <div
              class="ctrl-item"
              v-else
              @click="openGroupExitConfirm"
            >退出群组</div>
          </div>
          <i
            class="el-icon-more edit"
            slot="reference"
          ></i>
        </el-popover>
      </div>
      <el-collapse-transition>
        <div
          class="group-member"
          v-show="show"
        >
          <div
            class="member"
            @click="handleAddGroupMemberClick"
          >
            <i class="member-avatar el-icon-plus"></i>
            <div class="member-name">添加</div>
          </div>
          <div
            v-if="_isGroupCreator"
            class="member"
            @click="handleDeleteGroupMemberClick"
          >
            <i class="member-avatar el-icon-minus"></i>
            <div class="member-name">删除</div>
          </div>
          <div
            class="member"
            v-for="(member,index) in members"
            :key="index"
            :class="dataInfo.groupCreatorId===member.groupMemberId?'create':''"
            :title="member.groupMemberName"
          >
            <img
              class="member-avatar"
              :src="defaultAvatar(member.groupMemberAvatar)"
            />
            <div class="member-name">{{member.groupMemberName}}</div>
          </div>
        </div>
      </el-collapse-transition>
    </div>
    <div class="content">
      <div class="head-info">
        <div>
          <div class="group-name">{{dataInfo.groupName}}</div>
          <div class="group-intro">{{_introduction}}</div>
        </div>
        <div class="group-avatar">
          <img
            class="avatar"
            :src="_avatar"
          />
        </div>
      </div>
      <div class="other-info">
        <div class="info-item">
          <div class="label">群号</div>
          <div>{{dataInfo.groupId}}</div>
        </div>
        <div class="info-item">
          <div class="label">群主</div>
          <div>{{dataInfo.groupCreatorName}}</div>
        </div>
        <div class="info-item">
          <div class="label">群简介</div>
          <div>{{_introduction}}</div>
        </div>
        <div class="info-item">
          <div class="label">群通知</div>
          <div>{{_announcement}}</div>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-button
        type="primary"
        class="footer-btn"
        @click="handleCreateConferenceClick"
      >发起群会议</el-button>
      <el-button
        type="primary"
        class="footer-btn"
        @click="handleSendMsgClick"
      >进入群聊</el-button>
    </div>
    <form-dialog
      title="编辑群信息"
      :visible.sync="editGroupInfoFormVisible"
    >
      <edit-group-info-form
        ref="editGroup"
        :groupInfo="dataInfo"
        @cancel="handleUpdateGroupInfoCancel"
        @submit="handleUpdateGroupInfoSubmit"
      />
    </form-dialog>
    <form-dialog
      title="邀请好友"
      :visible.sync="addGroupMemberVisible"
      width="940px"
    >
      <add-group-member-form
        ref="addGroupMember"
        :groupMember="members"
        @submit="handleAddGroupMemberSubmit"
        @cancel="handleAddGroupMemberCancel"
      />
    </form-dialog>
    <!-- <form-dialog
      title="删除好友"
      :visible.sync="deleteGroupMemberVisible"
      width="940px"
    >
      <delete-group-member-form
        :members="members"
        @submit="handleDeleteGroupMemberSubmit"
        @cancel="handleDeleteGroupMemberCancel"
      />
    </form-dialog>
    <form-dialog
      title="发起群会议"
      :visible.sync="createConferenceVisible"
      width="750px"
    >
      <create-conference-form
        :groupName="dataInfo.groupName"
        :selectFriends="members"
        @submit="handleCreateConferenceSubmit"
        @cancel="handleCreateConferenceCancel"
      />
    </form-dialog> -->
  </div>
</template>

<script>
import EditGroupInfoForm from '../form/EditGroupInfoForm'
import AddGroupMemberForm from '../form/AddGroupMemberForm'
// import DeleteGroupMemberForm from '../form/DeleteGroupMemberForm'
// import CreateConferenceForm from '../form/CreateConferenceForm'
import { mapGetters } from 'vuex'
import { groupMembers, groupDismiss } from '@/api/group'
export default {
  name: 'GroupDetail',
  components: {
    EditGroupInfoForm,
    AddGroupMemberForm
    // DeleteGroupMemberForm,
    // CreateConferenceForm
  },
  props: {
    dataInfo: {
      type: Object
    }
  },
  data () {
    return {
      show: false,
      members: [],
      editGroupInfoFormVisible: false,
      addGroupMemberVisible: false,
      deleteGroupMemberVisible: false,
      createConferenceVisible: false
    }
  },
  computed: {
    ...mapGetters({
      userId: 'userId'
    }),
    _groupId () {
      return this.dataInfo.groupId || -1
    },
    _avatar () {
      return this.dataInfo.groupAvatar || 'https://picsum.photos/30/30'
    },
    _introduction () {
      return this.dataInfo.groupIntroduction || '暂无群简介'
    },
    _announcement () {
      return this.dataInfo.groupAnnouncement || '暂无群通知'
    },
    _memberNumber () {
      return this.members.length
    },
    _isGroupCreator () {
      return this.userId === this.dataInfo.groupCreatorId
    }
  },
  watch: {
    _groupId: {
      handler (newVal) {
        if (newVal !== -1) {
          this.handleGroupMember()
        }
      },
      immediate: true
    }
  },
  methods: {
    defaultAvatar (avatar) {
      return avatar || 'https://picsum.photos/30/30'
    },
    // 获取群成员
    async handleGroupMember () {
      const { data } = await groupMembers(this._groupId)
      this.members = data
    },
    // 显示与隐藏群成员
    handleShow () {
      this.show = !this.show
    },
    // 点击发送消息
    handleSendMsgClick () {
      this.$message.info('功能开发中，敬请期待。。。')
    },
    // 编辑群信息
    // 点击编辑群信息
    async handleUpdateGroupInfoClick () {
      this.editGroupInfoFormVisible = true
      await this.$nextTick()
      this.$refs.editGroup.reset()
    },
    // 取消更新群信息
    handleUpdateGroupInfoCancel () {
      this.editGroupInfoFormVisible = false
    },
    // 更新群信息提交
    handleUpdateGroupInfoSubmit () {
      this.editGroupInfoFormVisible = false
      //   this.dataInfo.groupAvatar = groupForm.groupAvatar
      //   this.dataInfo.groupName = groupForm.groupName
      //   this.dataInfo.groupIntroduction = groupForm.groupIntroduction
      //   this.dataInfo.groupAnnouncement = groupForm.groupAnnouncement
      this.$emit('refresh', 'group')
    },
    // 打开解散群提示窗口
    async openGroupDeleteConfirm () {
      try {
        const { groupName } = this.dataInfo
        await this.$warning(`将解散群【${groupName}】，是否继续？`)
        this.handleGroupDismiss()
      } catch {
        this.$message.info('已取消解散')
      }
    },
    // 解散群组
    async handleGroupDismiss () {
      const { groupId } = this.dataInfo
      await groupDismiss(groupId)
      this.$message.success('已解散该群')
      this.$emit('refresh', 'group', { init: true })
    },
    /**
     * 添加群成员
     */
    async handleAddGroupMemberClick () {
      this.addGroupMemberVisible = true
      await this.$nextTick()
      this.$refs.addGroupMember.reset()
    },
    /**
     * 删除群成员
     */
    handleDeleteGroupMemberClick () {
      this.deleteGroupMemberVisible = true
    },
    /**
     * 退出群组
     */
    openGroupExitConfirm () {
      this.$confirm(
        '将退出群【' + this.dataInfo.groupName + '】，是否继续？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          lockScroll: false
        }
      )
        .then(() => {
          this.handleGroupExit()
        })
        .catch(() => {
          this.$message.info('已取消解散')
        })
    },
    handleGroupExit () {
      this.$request.contact.groupExit(
        this.dataInfo.groupId,
        res => {
          this.$message.success('已退出该群')
          this.$emit('delete')
        },
        err => {
          this.$message.error(err.msg)
        }
      )
    },
    /**
     * 邀请人入群
     */
    handleAddGroupMemberSubmit (members) {
      const memberIds = members.map(item => item.friendId)
      this.handleAddGroupMember(memberIds)
    },
    handleAddGroupMember (memberIds) {
      this.$request.contact.groupMembersEnter(
        this.dataInfo.groupId,
        memberIds,
        res => {
          this.addGroupMemberVisible = false
          this.handleGroupMember()
        },
        err => {
          this.$message.error(err)
        }
      )
    },
    handleAddGroupMemberCancel () {
      this.addGroupMemberVisible = false
    },
    /**
     * 踢人
     */
    handleDeleteGroupMemberSubmit (members) {
      const memberIds = members.map(item => item.groupMemberId)
      this.handleDeleteGroupMember(memberIds)
    },
    handleDeleteGroupMember (memberIds) {
      this.$request.contact.groupMembersDelete(
        this.dataInfo.groupId,
        memberIds,
        res => {
          this.deleteGroupMemberVisible = false
          this.handleGroupMember()
        },
        err => {
          this.$message.error(err)
        }
      )
    },
    handleDeleteGroupMemberCancel () {
      this.deleteGroupMemberVisible = false
    },
    /**
     * 发起群会议
     */
    handleCreateConferenceClick () {
      this.createConferenceVisible = true
    },
    handleCreateConferenceSubmit () {
      this.createConferenceVisible = false
    },
    handleCreateConferenceCancel () {
      this.createConferenceVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
$header-width: 50px;
$info-width: 420px;
$border-color: #ccc;
$border: 1px solid $border-color;
.main {
  height: 100%;
  display: flex;
  flex-direction: column;
  .content::-webkit-scrollbar {
    display: none;
  }
  .header {
    height: $header-width;
    line-height: $header-width;
    text-align: center;
    border-bottom: $border;
    position: relative;
    .browse {
      display: inline-block;
      height: $header-width;
      line-height: $header-width;
      font-size: 16px;
      cursor: pointer;
    }
    .ctrl {
      height: $header-width;
      line-height: $header-width;
      position: absolute;
      top: 0;
      right: 30px;
    }
    .edit {
      height: $header-width;
      line-height: $header-width;
      font-size: 25px;
      cursor: pointer;
    }
    .group-member {
      background-color: #eee;
      position: absolute;
      top: $header-width;
      padding: 0 25px;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      border-top: $border;
      border-bottom: $border;
      .create {
        color: #ff6600;
      }
      .member {
        box-sizing: border-box;
        width: 70px;
        padding: 10px;
        cursor: pointer;
        &:hover {
          background-color: #c0c4cc;
        }
        .member-avatar {
          box-sizing: border-box;
          border: $border;
          display: block;
          width: 50px;
          height: 50px;
          line-height: 50px;
          font-size: 40px;
        }
        .member-name {
          width: 50px;
          height: 30px;
          line-height: 30px;
          font-size: 12px;
          text-align: center;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .content {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: scroll;
    .head-info {
      margin-top: 75px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      width: $info-width;
      .group-name {
        font-weight: 400;
        font-size: 24px;
        margin-bottom: 10px;
        height: 31px;
      }
      .group-intro {
        font-size: 14px;
        color: #9ca1a6;
      }
      .group-avatar {
        .avatar {
          height: 60px;
          width: 60px;
        }
      }
    }
    .other-info {
      margin: 40px 0 30px 0;
      padding: 30px 0;
      width: $info-width;
      border-top: $border;
      border-bottom: $border;
      .info-item {
        display: flex;
        min-height: 30px;
        .label {
          min-width: 60px;
          text-align: justify;
          text-align-last: justify;
          margin-right: 40px;
          color: #9ca1a6;
        }
        .edit {
          margin-left: 10px;
          flex: 1;
          text-align: right;
        }
      }
    }
  }
  .footer {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    .footer-btn {
      height: 50px;
      width: 170px;
    }
  }
}
.ctrl-group {
  .ctrl-item {
    text-align: center;
    border-bottom: $border;
    box-sizing: border-box;
    padding: 8px 0px;
    cursor: pointer;
    &:hover {
      color: #409eff;
    }
    &:last-child {
      border: 0;
    }
  }
}
</style>
